<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>登录</title>
<script type="text/javascript">
	//获取ajax引擎的函数(进行浏览器兼容处理)
	function getXMLHttpR(){
		//返回值对象
		var xhr = null;
		try{
			// 假定当前浏览器为  Firefox, Opera 8.0+, Safari，获取ajax引擎对象
			// 创建ajax引擎对象
			xhr = new XMLHttpRequest();
		}catch(e){
			//创建ajax引擎对象出现异常，说明浏览器不兼容
			//尝试IE浏览器的方式获取
			try{
				xhr = new ActiveXObject("Msxml2.XMLHTTP");
			}catch(e){
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
		}
		return xhr;
	}
	//定义个全局的ajax引擎
	var XMLHttpR = getXMLHttpR();
	//进行ajax异步请求处理
	function doAjaxGet(){
		if (XMLHttpR != null) {
			//get的方式处理
			//请求的服务器的url（等价于form表单的action属性值）
			var url = "../../AjaxDemoServlet";
			
			//post方法传输数据的data
			var datas = "un="+document.getElementById("adminName").value+"&upsw="+document.getElementById("adminPsw").value;
			//打开ajax引擎的请求连接
			//第一个参数是request请求的方式，第二个参数是ajax引擎请求的服务器的url，第三个参数是是否进行异步处理
			XMLHttpR.open("POST",url,true);
			//设置post请求的contenttype类型
			XMLHttpR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			// 发送ajax请求（因为已经通过url的方式进行数据传输，所以send方法使用参数null即可， 如果是post方法，通过send方法将数据发出）
			XMLHttpR.send(datas);
			// 指定ajax引擎状态改变时的回调函数（该函数在触发是可以进行dom操作进行局部刷新的处理）
			XMLHttpR.onreadystatechange=ajaxCallBack;
		} else {
			alert("该浏览器不支持ajax机制");
		}
	}
	//ajax的回调函数
	function ajaxCallBack(){
		// 当ajax引擎状态码为4时，进行dom操作
		if (XMLHttpR.readyState==4 && XMLHttpR.status==200) {
			// 接受服务器影响的数据内容
			var respText = XMLHttpR.responseText;
			// 将服务器接受的内容通过dom操作，进行页面的局部刷新操作
			document.getElementById("msg").innerHTML = respText;
		}
	}
</script>
</head>
<body>
<div>
	用户名：<input type="text" id="adminName" />
	密码：<input type="text" id="adminPsw" />
	<input type="button" name="" value="login" onclick="doAjaxGet();"/>
	</div>
	<div>
	<p id="msg" style="color: black;">登录成功！</p>
	</div>
</body>
</html>